<template>
  <!-- 方案的新建和修改弹出的对话框 -->
  <div class="auto-scheme">
    <el-dialog v-model="state.dialogVisible" :before-close="handleClose" width="65%" height="80%">
      <template #header>
        <div class="my-header">
          <div class="title-hr"></div>
          <div>
            <span class="title-top">来水预报方案-</span>
            {{ state.title }}
          </div>
        </div>
      </template>
      <div class="scheme-box">
        <el-form
          :disabled="state.disabledFlag"
          ref="ruleFormRef"
          :model="state.addForm"
          :rules="state.rulesData"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
          :validate-on-rule-change="false"
        >
          <el-row>
            <div class="base-title">基本信息</div>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="方案名称：" prop="scName">
                <el-input placeholder="请输入" v-model="state.addForm.scName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="模型类型：">
                <div class="model-type-box">
                  <el-radio-group
                    v-model="state.modelType"
                    class="ml-4"
                    @change="handleChangeRadio"
                  >
                    <el-radio :label="0" size="large">传统水文</el-radio>
                    <el-radio :label="1" size="large">智能水文</el-radio>
                    <el-radio :label="2" size="large">传统+智能水文</el-radio>
                  </el-radio-group>

                  <el-button
                    type="primary"
                    plain
                    v-if="state.modelType !== 0"
                    @click="handleShowSetting"
                    >智能水文预报设置</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <div class="base-title">时间信息</div>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="预报时间：" prop="fcTime">
                <div>
                  <el-date-picker
                    v-model="state.addForm.fcTime"
                    type="datetime"
                    placeholder="选择日期"
                    @change="handleChangeDate"
                  ></el-date-picker>
                </div> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="预热期：" prop="yrPerd">
                <div class="content-item">
                  <el-input
                    v-model="state.addForm.yrPerd"
                    @input="handleBlurStart"
                    :disabled="state.modelType == 1"
                  ></el-input>
                  <span>小时</span>
                </div>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="预见期：" prop="yjPerd">
                <div class="content-item">
                  <el-input
                    v-model="state.addForm.yjPerd"
                    @input="handleBlurEnd"
                    :disabled="state.modelType == 1"
                  ></el-input>
                  <span>小时</span>
                </div>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="计算步长：" prop="intv">
                <div class="content-item">
                  <el-input v-model="state.addForm.intv" :disabled="true"></el-input>
                  <span>小时</span>
                </div>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="预报开始时间：">
                <div class="content-item">
                  {{ state.startTime }}
                </div>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="预报结束时间：">
                <div class="content-item">
                  {{ state.endTime }}
                </div>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <div class="base-title">降雨信息</div>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="降雨分布：" prop="rtypeTotal">
                <el-select v-model="state.addForm.rtypeTotal" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in state.rainTypeArr"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="雨量值：" prop="rvalTotal">
                <div class="content-item">
                  <el-input v-model="state.addForm.rvalTotal"></el-input>
                </div> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="降雨时长：" prop="fhoursTotal">
                <!-- <div class="content-item"> -->
                <el-input-number v-model="state.addForm.fhoursTotal" />&nbsp;小时

                <!-- </div> -->
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="实测降雨来源：" prop="rainZtype">
                <!-- <el-select v-model="state.addForm.rainZtype" placeholder="请选择">
                  <el-option v-for="(item, index) in state.rainZtype" :key="index" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>  -->
                实测降雨
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="折减系数：" prop="rd">
                <div class="content-item">
                  <el-input
                    type="number"
                    min="0"
                    max="1"
                    step="0.01"
                    v-model="state.addForm.rd"
                    @input="handleInputLimit"
                    autocomplete="off"
                    placeholder="0-1"
                  ></el-input>
                </div> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="初始化底水：" prop="qInit">
                <el-select
                  v-model="state.addForm.qInit"
                  placeholder="请选择"
                  :disabled="state.modelType == 1"
                >
                  <el-option :label="'否'" :value="0"></el-option>
                  <el-option :label="'是'" :value="1"></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row class="flex-bottom">
            <div class="base-title">模型信息</div>
          </el-row>
          <el-row class="flex-bottom">
            <el-col :span="8">
              <el-form-item label="计算方案类型：" prop="calcscType">
                <el-select
                  v-model="state.addForm.calcscType"
                  placeholder="请选择"
                  @change="handleChangeSchemeTypeClick"
                  :disabled="state.modelType == 1"
                >
                  <el-option
                    v-for="(item, index) in state.rainTypes"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="8" v-if="state.addForm.calcscType === 1">
              <el-form-item label="河系：" prop="calcZone">
                <el-select
                  v-model="state.addForm.calcZone"
                  placeholder="请选择"
                  @change="handleChangeRiverArea"
                  :disabled="state.modelType == 1"
                >
                  <el-option
                    :key="index"
                    v-for="(item, index) in state.areaRiverList"
                    :value="item.id"
                    :label="item.calczName || item.rsysName || item.basinName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="state.addForm.calcscType === 0">
              <el-form-item label="区域：" prop="calcZone">
                <el-select
                  v-model="state.addForm.calcZone"
                  placeholder="请选择"
                  @change="handleChangeRiverArea"
                  :disabled="state.modelType == 1"
                >
                  <el-option
                    :key="index"
                    v-for="(item, index) in state.areaRiverList"
                    :value="item.id"
                    :label="item.calczName || item.rsysName || item.basinName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="state.addForm.calcscType === 2">
              <el-form-item label="流域：" prop="calcZone">
                <el-select
                  v-model="state.addForm.calcZone"
                  placeholder="请选择"
                  @change="handleChangeRiverArea"
                  :disabled="state.modelType == 1"
                >
                  <el-option
                    :key="index"
                    v-for="(item, index) in state.areaRiverList"
                    :value="item.id"
                    :label="item.calczName || item.rsysName || item.basinName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调度方式：" prop="disTypes">
                <el-select
                  multiple
                  v-model="state.addForm.disTypes"
                  placeholder="请选择"
                  :disabled="state.modelType == 1"
                >
                  <el-option
                    v-for="(item, index) in state.disTypesArr"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="table-height">
            <el-table :data="state.addForm.calcModels" style="width: 100%">
              <el-table-column prop="model" label="水文模型" width="width" align="center">
                <template #default="{ row, $index }">
                  <div class="container-select">
                    <el-select
                      v-model="row.model"
                      placeholder="请选择"
                      @change="handleTypesItemClick($event, $index)"
                      :disabled="state.modelType == 1"
                    >
                      <el-option
                        v-for="item in state.typesArr"
                        :key="item.modelType"
                        :label="item.typeName"
                        :value="item.modelType"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="calcScid" label="计算方案名称" width="width" align="center">
                <template #default="{ row, $index }">
                  <div class="container-select">
                    <el-select
                      ref="selectRef"
                      v-model="row.calcScid"
                      placeholder="请选择"
                      :disabled="state.modelType == 1"
                      @change="handleClickSelect(row, $index)"
                    >
                      <el-option
                        v-for="(item, index) in state['scNameArr' + $index]"
                        :key="index"
                        :label="item.scName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="width" align="center">
                <template #header>
                  操作
                  <el-button type="primary" link v-if="!(state.modelType == 1)">
                    <el-icon class="font-icon" @click="handleAdd()">
                      <CirclePlus />
                    </el-icon>
                  </el-button>
                </template>
                <template #default="scope">
                  <el-icon
                    color="#409EFC"
                    class="font-icon"
                    @click="handleDelete(scope.$index, scope.row)"
                  >
                    <Delete />
                  </el-icon>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">保存</el-button>
          <!-- <el-button type="primary" @click="handleCount">计算</el-button> -->
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <waterSetting ref="waterSettingRef" @saveListBlkcd="saveListBlkcd" />
  </div>
</template>

<script setup>
import { ref, reactive, defineExpose } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { dateFtt } from '@/utils/index'
import waterSetting from '@/components/app-publicui/waterSetting.vue'
import {
  // 查询方案模型类型
  getCalcModelType,
  // 查询区域计算方案
  getSchemeList,
  //查询河系计算方案
  getRiverScheme,
  //查询全流域计算方案
  getBasinSchemeList,
  getAreaList,
  getRsysList,
  getBasinList
} from '@/services/modules/compute-methods.js'
import {
  // 保存方案
  postSaveSimulateReportScheme,
  // 查询方案详情
  getDispatchSchemeDetail,
  // 查询方案详情
  getDispatchSchemeInfo,
  // 删除调度方案
  postDeleteDispatchItem
} from '@/services/modules/dispatch-manage.js'
import { formatMsToDate } from '@/utils/index'

const state = reactive({
  title: '新建',
  modelType: 0,
  selectData: [],
  disabledFlag: false,
  dialogVisible: false,
  rulesData: [],
  addForm: {
    // 方案名称
    scName: '',
    // 模型类型
    // model: "",
    // ----时间信息--------------
    // 预报时间
    fcTime: '',
    // 预热期
    yrPerd: '',
    // 预见期
    yjPerd: '',
    // 计算步长
    intv: 1,
    // ----降雨信息--------------
    // 降雨类型 1.模拟降雨(要传默认值)
    rainType: 1,
    // 模型降雨的类型 0：整体总雨量分配，1：自定义每个预报断面降雨
    rainCust: 0,
    // 折减系数
    rd: '1',
    // 初始化底水：
    qInit: 0,
    // // 实测降雨来源
    // rainTest: 0,
    // 放大值
    rvalTotal: 0,
    // 降雨时长
    fhoursTotal: 1,
    // ----模型信息--------------
    // 计算方案类型：
    calcscType: '',
    // 计算方案所在河系或者区域ID
    calcZone: '',
    // 调度方式，多选逗号分隔
    disTypes: '',
    // 方案模型信息,表格
    calcModels: [
      // 方案模型类型，计算方案编号
      // { model: "", calcScid: "" }
    ],
    // 创建类型
    createType: 0,
    zoneId: '',
    aiSections: []
  },

  // 方案模型类型
  typesArr: [],
  // 流域。。。
  areaRiverList: [],
  // 计算方案名称数组
  scNameArr: [],
  // 计算方案类型
  rainTypes: [
    { name: '区域方案', id: 0 },
    { name: '河系方案', id: 1 },
    { name: '全流域方案', id: 2 }
  ],
  disTypesArr: [
    { name: '规程调度', id: 1 },
    // { name: "优化调度", id: 2 },
    // { name: "指令调度", id: 3 },
    { name: '水量平衡（不拦蓄）', id: 4 },
    { name: '蓄水（不泄洪）', id: 5 },
    { name: '现状调度', id: 6 }
  ],
  // 降雨类型
  rainTypeArr: [
    { name: '正态分布', id: 2 },
    { name: '正弦分布', id: 3 },
    { name: '平均分布', id: 1 }
  ]
  // 放大类型
  // rainZtype: [
  //   { name: '实测降雨', id: 0 }
  // ]
})
let saveLoading
const ruleFormRef = ref(null)
const waterSettingRef = ref(null)
const rules = {
  scName: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
  fcTime: [{ required: true, message: '请选择预报时间', trigger: 'blur' }],
  yrPerd: [{ required: true, message: '请输入预热期', trigger: 'blur' }],
  yjPerd: [{ required: true, message: '请输入预见期', trigger: 'blur' }],
  intv: [{ required: true, message: '请输入计算步长', trigger: 'blur' }],
  // 将与类型
  rainType: [{ required: true, message: '请选择降雨类型', trigger: 'blur' }],

  rd: [{ required: true, message: '请输入折减系数', trigger: 'blur' }],
  qInit: [{ required: true, message: '请选择', trigger: 'blur' }],
  // rainZtype: [{ required: true, message: '请选择放大类型', trigger: 'blur' }],
  rainZval: [{ required: true, message: '请输入放大值', trigger: 'blur' }],
  calcscType: [{ required: true, message: '请选择计算方案类型', trigger: 'blur' }],
  calcZone: [{ required: true, message: '请选择', trigger: 'blur' }],
  disTypes: [{ required: true, message: '请选择调度方式', trigger: 'blur' }]
}

// 打开弹框 formScid方案id
function handleOpenModal(watershedId, formScid) {
  state.dialogVisible = true
  state.addForm.zoneId = watershedId
  // 获取方案模型类型
  acceptTypes()
  if (formScid) {
    state.title = '修改'
    // 查看方案详情
    acceptSchemeDetail(formScid)
    // 如果是修改那么将方案id填入
    state.addForm.id = formScid
  } else {
    delete state.addForm.id
    state.startTime = ''
    state.endTime = ''
    // 新建
    state.title = '新建'
  }
  state.rulesData = rules
}
defineExpose({ handleOpenModal })
// 获取方案详情
function acceptSchemeDetail(id) {
  // scBelong:（0：洪水预报，1：调度预报）

  getDispatchSchemeInfo({ scid: id, scBelong: 0 }).then(async (res) => {
    if (res.code == 200) {
      state.addForm = res.data
      state.addForm.id = id
      // 底部列表回显
      state.addForm.calcModels = res.data.models
      // 计算步长回显
      state.addForm.intv = res.data.invt
      await handleChangeSchemeType(state.addForm.calcscType)

      // 调度方式回显
      if (state.addForm.disTypes) {
        state.addForm.disTypes = state.addForm.disTypes.split(',').map((item) => {
          return parseInt(item)
        })
      } else {
        state.addForm.disTypes = ''
      }
      // 4.获取底部表格数据
      state.addForm.calcModels.forEach(async (e, index) => {
        //   // 选中的水文模型,获取方案名称
        await handleTypesItem(e.model, index)
      })
      state.addForm.aiSections = res.data.aiSections
      state.modelType = res.data.createType
      state.startTime = res.data.startTime
      state.endTime = res.data.endTime
      handleChangeRadio()

      delete state.addForm.models
      delete state.addForm.rpType
      delete state.addForm.invt
      delete state.addForm.calcEnd
      delete state.addForm.calcStart
    }
  })
}
// 获取两个数组中相同name的对象，并提取id组成新数组
const getCommonIds = (arr1, arr2) => {
  const commonNames = arr1.filter((obj1) => {
    return arr2.some((obj2) => obj2 === obj1.name)
  })

  return commonNames.map((obj) => obj.id)
}
const emit = defineEmits(['handleRefresh'])
// 关闭弹框的回调
function handleClose() {
  state.dialogVisible = false
  // 关闭弹框并将之前内容置空
  ruleFormRef.value.resetFields()
  state.modelType = 0
  state.addForm.calcModels = []
  state.addForm.aiSections = []
}

// 选中预报时间后将之前的预热期等清空
function handleChangeDate(val) {
  state.addForm.fcTime = dateFtt('yyyy-MM-dd hh', val) + ':00:00'
  handleBlurStart()
  handleBlurEnd()
  console.log(state.addForm.fcTime, '直接')
}
// 预热期
function handleBlurStart() {
  // state.addForm.fcTime = new Date(state.addForm.fcTime).getTime()
  state.startTime = formatMsToDate(
    new Date(state.addForm.fcTime).getTime() - state.addForm.yrPerd * 3600000
  )
}
// 预见期
function handleBlurEnd() {
  // state.addForm.fcTime = new Date(state.addForm.fcTime).getTime()
  state.endTime = formatMsToDate(
    new Date(state.addForm.fcTime).getTime() + state.addForm.yjPerd * 3600000
  )
}
// 操作新建
function handleAdd() {
  state.addForm.calcModels.push({ model: '', calcScid: '' })
}
// 操作删除
function handleDelete(index, row) {
  ElMessageBox.confirm(`是否删除`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      state.addForm.calcModels.splice(index, 1)
      // 删除时如果是编辑的删除
      if (state.title == '修改') {
        postDeleteDispatchItem({ id: row.scid }).then(async (res) => {
          if (res.code == 200) {
            ElMessage.success('删除成功')
          } else {
            ElMessage.warning('删除失败')
          }
        })
      }
      state.addForm.calcModels.forEach(async (e, index) => {
        //   // 选中的水文模型,获取方案名称
        await handleTypesItem(e.model, index)
      })
    })
    .catch(() => {})
}
//改变降雨接入类型
function handleRainType(item) {
  if (item == 0) {
    state.rainTypeFlag = 1
  } else if (item == 1) {
    state.rainTypeFlag = 0
  }
}
function handleInputLimit() {
  if (state.addForm.rd > 1) {
    state.addForm.rd = 1
  } else if (state.addForm.rd < 0) {
    state.addForm.rd = 0
  } else if (
    state.addForm.rd.toString().split('.')[1] &&
    state.addForm.rd.toString().split('.')[1].length > 2
  ) {
    state.addForm.rd = Number(state.addForm.rd).toFixed(2)
  }
  state.addForm.rd = state.addForm.rd.toString().replace(/^0+\./g, '0.')
}
// 查询方案模型类型
function acceptTypes() {
  getCalcModelType().then((res) => {
    if (res.code == 200) {
      state.typesArr = res.data
    }
  })
}
function handleTypesItemClick(val, index) {
  if (state.addForm.calcModels.length) {
    state.addForm.calcModels[index].calcScid = ''
  }
  handleTypesItem(val, index)
}
// 过滤重复数据 并且在过滤完 加上当前行选中过的数据
const handleFilterDataRepeat = (data, index) => {
  // 拿到列表的数据，拿到列表内所有的id组成数组
  let ids = state.addForm.calcModels.map((item) => item.calcScid) // 如果当前行的calcScid存在，将下拉框绑定的数据 在加上calcScid对应的 接口列表数据
  if (state.addForm.calcModels[index].calcScid) {
    ids = ids.filter((e) => {
      return e != state.addForm.calcModels[index].calcScid
    })
    state['scNameArr' + `${index}`] = data.filter((item) => !ids.includes(item.id))
  } // 将数组对象data中的id与id数组进行比较
  state['scNameArr' + `${index}`] = data.filter((item) => !ids.includes(item.id)) // return ids
}
// 每次点击下拉框选中 后触发 ，将除当前行的index和data值除外的其他行遍历调用handleFilterDataRepeat
const handleClickSelect = (row, index) => {
  state.addForm.calcModels.forEach((e, indexVal) => {
    if (indexVal != index && row.model == e.model) {
      handleFilterDataRepeat(state['selectData' + `${index}`], indexVal)
    }
  })
}
// 选中水文模型
function handleTypesItem(val, index) {
  // if (state.addForm.calcModels.length) {
  //   state.addForm.calcModels[index].calcScid = "";
  // }
  if (state.addForm.calcscType === 0) {
    return new Promise((resolve, reject) => {
      getSchemeList({ zid: state.addForm.calcZone, model: val }).then((res) => {
        if (res.code == 200) {
          state['selectData' + `${index}`] = res.data

          handleFilterDataRepeat(res.data, index)
          resolve(state['scNameArr' + `${index}`])
        }
      })
    })
  } else if (state.addForm.calcscType === 1) {
    return new Promise((resolve, reject) => {
      getRiverScheme({ rsid: state.addForm.calcZone, model: val }).then((res) => {
        if (res.code == 200) {
          state['selectData' + `${index}`] = res.data

          handleFilterDataRepeat(res.data, index)
          resolve(state['scNameArr' + `${index}`])
        }
      })
    })
  } else if (state.addForm.calcscType === 2) {
    return new Promise((resolve, reject) => {
      getBasinSchemeList({ basinId: state.addForm.calcZone, model: val }).then((res) => {
        if (res.code == 200) {
          state['selectData' + `${index}`] = res.data

          handleFilterDataRepeat(res.data, index)
          resolve(state['scNameArr' + `${index}`])
        }
      })
    })
  }
}
function handleChangeSchemeTypeClick(val) {
  // 弹框最下面的列表
  state.addForm.calcModels = []
  // 把选中的流域，区域清空
  state.addForm.calcZone = ''
  handleChangeSchemeType(val)
}
// 改变计算方案类型
function handleChangeSchemeType(val) {
  state.areaRiverList = []
  if (val === 0) {
    return new Promise((resolve, reject) => {
      getAreaList({ zoneId: state.addForm.zoneId }).then((res) => {
        if (res.code === 200) {
          state.areaRiverList = res.data
          console.log(state.areaRiverList, 999999)
          resolve(state.areaRiverList)
        }
      })
    })
  } else if (val === 1) {
    return new Promise((resolve, reject) => {
      getRsysList({ zoneId: state.addForm.zoneId }).then((res) => {
        if (res.code === 200) {
          state.areaRiverList = res.data
          console.log(state.areaRiverList, 999999)
          resolve(state.areaRiverList)
        }
      })
    })
  } else if (val == 2) {
    return new Promise((resolve, reject) => {
      getBasinList({ zoneId: state.addForm.zoneId }).then((res) => {
        if (res.code === 200) {
          state.areaRiverList = res.data
          console.log(state.areaRiverList, 999999)
          resolve(state.areaRiverList)
        }
      })
    })
  }
}
// 改变区域。。
function handleChangeRiverArea() {
  // 弹框最下面的列表
  state.addForm.calcModels = []
}
// 改变模型类型
function handleChangeRadio() {
  ruleFormRef.value.clearValidate()
  // state.addForm.
  // 如果选择智能水文
  state.addForm.createType = state.modelType
  if (state.modelType == 1) {
    state.rulesData = {
      scName: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
      fcTime: [{ required: true, message: '请选择预报时间', trigger: 'blur' }],
      rainType: [{ required: true, message: '请选择降雨类型', trigger: 'blur' }],
      rd: [{ required: true, message: '请输入折减系数', trigger: 'blur' }],
      // rainZtype: [{ required: true, message: '请选择放大类型', trigger: 'blur' }],
      rainZval: [{ required: true, message: '请输入放大值', trigger: 'blur' }]
    }
  } else {
    state.rulesData = rules
  }
  ruleFormRef.value.clearValidate()
}
// 预报设置
function handleShowSetting() {
  waterSettingRef.value.handleOpenSetting(state.addForm.zoneId, state.addForm.aiSections)
}
//
function saveListBlkcd(blkcdArr) {
  state.addForm.aiSections = blkcdArr
}
// 保存方案
function handleSave() {
  ruleFormRef.value.validate(async (valid) => {
    if (!state.addForm.calcModels?.length > 0 && state.modelType !== 1) {
      // 列表中没有选中的话提示
      ElMessage.warning('请选择水文模型及计算方案名称')
    } else if (state.addForm.createType !== 0 && state.addForm.aiSections.length == 0) {
      ElMessage.warning('请选择"智能水文预报设置"模型信息')
    } else {
      state.addForm.disTypes = state.addForm.disTypes.toString()
      if (valid) {
        // 当选择智能水文时
        if (state.modelType == 1) {
          state.addForm.yrPerd = ''
          state.addForm.yjPerd = ''
          // 计算步长
          state.addForm.intv = ''
          // 初始化低水
          // state.addForm.qInit = ''
          // 计算方案类型
          state.addForm.calcscType = ''
          // 河系
          state.addForm.calcZone = ''
          // 调度方式
          state.addForm.disTypes = ''
          // 水文模型
          state.addForm.calcModels = []
        }
        saveLoading = ElLoading.service({
          text: '正在保存数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (state.title == '新建') {
          postSaveSimulateReportScheme(state.addForm).then((res) => {
            if (res.code == 200) {
              ElMessage.success('新建成功')
              saveLoading.close()
              // 关闭弹框并刷新方案列表
              emit('handleRefresh')
              // 新建成功 关闭弹框清空表单
              handleClose()
            } else {
              handleClose()
              saveLoading.close()
              ElMessage.warning('新建失败')
            }
          })
        } else {
          postSaveSimulateReportScheme(state.addForm).then((res) => {
            if (res.code == 200) {
              ElMessage.success('修改成功')
              saveLoading.close()
              // 关闭弹框并刷新方案列表
              emit('handleRefresh')
              // 新建成功 关闭弹框清空表单
              handleClose()
            } else {
              saveLoading.close()
              handleClose()
              ElMessage.warning('修改失败')
            }
          })
        }
      }
    }
  })
}
</script>

<style lang="less" scoped>
.el-form-item {
  display: flex;
  align-items: center;
}
.model-type-box {
  width: 100%;
  // margin-right: 0;
  // margin-left: 100px;
  display: flex;
  justify-content: space-between;
}
.container-select {
  .el-select {
    width: 100%;
    :deep(.el-input) {
      width: 100%;
    }
  }
}
.font-icon {
  font-size: 20px;
}
.water-position {
  margin-left: 80px;
  .el-input {
    width: 80px;
  }
}
.config-title {
  margin-left: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-title {
  margin-bottom: 5px;
}
.btn-title {
  height: 30px;
  color: #409eff;
  display: flex;
  align-items: center;
  margin-left: 30px;
  cursor: pointer;
}
:deep(.el-input) {
  width: 200px;
}
.content-table-box {
  height: calc(100% - 50px);
  overflow-y: auto;
  .content-table {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 10px;
    // height: 50px;
    :deep(.el-input) {
      width: 80px;
      margin-right: 15px;
    }
    // span:nth-of-type(1) {
    //   margin-left: 10px;
    // }
    span {
      margin: 0 10px;
    }
  }
}
.content-table {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-bottom: 10px;
  // height: 50px;
  :deep(.el-input) {
    width: 80px;
    margin-right: 15px;
  }
  // span:nth-of-type(1) {
  //   margin-left: 10px;
  // }
  span {
    margin: 0 10px;
  }
}

.magr-right {
  margin-right: 20px;
}
.content-item {
  display: flex;
  justify-content: center;
  align-items: center;
  // height: 50px;
  :deep(.el-input) {
    width: 80px;
  }

  // span:nth-of-type(1) {
  //   margin-left: 10px;
  // }
  span {
    margin: 0 10px;
  }
  // span:nth-of-type(3) {
  //   margin: 0 20px 0 80px;
  // }
}
.auto-scheme {
  width: 100%;
  height: 100%;
  :deep(.el-overlay) {
    width: 100%;
    height: 100%;
    .el-overlay-dialog {
      width: 100%;
      height: 100%;
      :deep(.el-dialog) {
        width: 100%;
        height: 100%;
        margin: 0 auto;
      }
    }
  }

  .my-header {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    height: 35px;
    border-bottom: 2px solid #eee;
    font-size: 21px;
    .title-hr {
      height: 18px;
      border: #4fc0f1 2px solid;
      margin-right: 10px;
    }
    .title-top {
      color: #4fc0f1;
    }
  }
  .scheme-box {
    .el-col {
      // margin-left: 20px;
    }
    // height: 30vh;
    :deep(.el-form) {
      height: 100%;
      // .el-form-item__label-wrap {
      //   margin-left: 50px;
      // }
    }
    :deep(.el-row) {
      // padding-left: 20px;
    }
    .flex-bottom {
      display: flex;
      align-items: center;

      .el-form-item {
        margin-bottom: 10px;
        // margin-left: 12px;
      }
    }
    .table-height {
      margin-top: 20px;
      height: 180px;
      :deep(.el-table--fit) {
        height: 100%;
      }
      // overflow-y: auto;
      // margin-bottom: 20px;
    }
    .base-title {
      // font-size: 14px !important;
      // margin-left: 15px;
      color: #169bd5;
      margin-bottom: 10px;
    }
  }
}
</style>
